<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="../../css/root.css" />
		<link rel="stylesheet" href="../../css/grid.css" />
		<script src="../../../libs/d3/d3.v6.js"></script>
	</head>

	<body>
		<header>
			<h1>饼图</h1>
		</header>
		<main class="container">
			<h2>基本饼图</h2>
			<section>
				<div id="pieChart" style="height: 50vh"></div>
			</section>
			<h2>甜甜圈图</h2>
			<section>
				<div id="donutPieChart" style="height: 50vh"></div>
			</section>
			<h2>堆叠南丁格尔玫瑰图</h2>
			<section>
				<div id="rosePie" style="height: 50vh"></div>
			</section>
		</main>

		<script type="module">
			import { RosePie, PieChart } from '../../dist/ccd3.js'

			d3.csv('./data/pieChart.csv').then((data) => {
				let pieChart = new PieChart('pieChart', data)
					.setClassificationKey('name')
					.setValueKey('value')
					.setInnerRadius(0)
					.init()
					.render()

				// 改变内半径所占比例就能得到经典的甜甜圈
				let donutPieChart = new PieChart('donutPieChart', data)
					.setClassificationKey('name')
					.setValueKey('value')
					.setInnerRadius(0.65)
					.init()
					.render()
				setInterval(() => {
					data.pop()
					pieChart.render()
					donutPieChart.render()
				}, 1000)
			})

			d3.csv('./data/rosePie.csv').then((data) => {
				let rosePie = new RosePie('rosePie', data)
					.setNameKey('name')
					.setStackKeys(['error', 'success', 'sum'])
					.setInnerRadius(100)
					.init()
					.render()
				setInterval(() => {
					data.pop()
					rosePie.render()
				}, 1000)
			})
		</script>
	</body>
</html>
